<template>
  <div>
    <el-card class="container">
      <!-- 搜索栏目 -->
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item label="关键字">
          <el-input
            v-model="page.keyword"
            placeholder="根据编号搜索"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" @click="submitForm()">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 总数据提示栏 -->
      <el-row class="prompt">
        <i class="el-icon-warning"></i>
        <el-col>数据一共{{ counts }}条</el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="编号" width="220"> </el-table-column>
        <el-table-column label="题型">
          <template slot-scope="scope">
            <!-- {{questionType=scope.row.questionType}} -->
            <span v-if="scope.row.questionType === '1'"> 单选 </span>
            <span v-else-if="scope.row.questionType === '2'"> 多选 </span>
            <span v-else-if="scope.row.questionType === '3'"> 简答 </span>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="220">
          <template slot-scope="scope">
            <a
              v-for="item in scope.row.questionIDs"
              :key="item.number"
              class="listA"
              @click="ShowDialogForm(item)"
              >{{ item.number }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间"> </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, list)"
              type="danger"
              circle
              icon="el-icon-delete"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页栏 -->
      <el-row type="flex" justify="end" align="center">
        <el-pagination
          layout="sizes, prev, pager, next, jumper"
          :total="counts"
          background
          :page-sizes="[20, 30, 50, 100]"
          :page-size="page.pagesize"
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page.page"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 弹出层组件 -->
    <questionsPreview :dialogForm.sync="dialogForm" :currentData="currentData"></questionsPreview>
  </div>
</template>

<script>
// 导入获取组题列表中的数据API
import { getQuestionsRandoms, delQuestionsRandoms, getQuestionsRandomsID } from '@/api/hmmm/questions'
// 导入弹出层组件
import questionsPreview from '../components/questions-preview1.vue'
// 导入HTML转文字的方法
import { html2Text } from '@/utils/index'
export default {
  name: 'Randoms',
  data () {
    // 自定义校验规则
    return {
      state: '',
      page: {
        page: 1, // 当前页数,默认初始为
        pagesize: 20, // 页尺寸
        keyword: '' // 关键字
      },
      counts: 0, // 总数据的汇总
      list: [], // 用来接收返回的数据
      dialogForm: false, // 控制弹出层的显示与影藏
      currentData: {} // 根据编号获取到的数据
    }
  },
  components: {
    questionsPreview
  },
  methods: {
    // 获取数据
    async getQuestionsRandoms () {
      const { data } = await getQuestionsRandoms(this.page)
      // console.log(data)
      this.counts = data.counts
      this.list = data.items
    },
    // 点击页码跳转到点击的当前页,并重新渲染数据
    currentChange (index) {
      this.page.page = index
      this.getQuestionsRandoms()
      console.log(index)
    },
    // 当点击pagesize改变时,渲染点击的条数:20,50,100
    sizeChange (index) {
      // 页码调到第一页
      this.page.pagesize = index
      this.currentChange(1)
    },
    // 点击搜索按钮搜索关键字,并重新渲染数据,显示一共有多少条数据
    submitForm () {
      // this.list.forEach((item) => {
      //   item.id.replace(/this.page.keyword/g)
      // })
      this.getQuestionsRandoms(this.page)
    },
    // 点击清除搜索框中的数据
    resetForm () {
      this.page.keyword = ''
    },
    async deleteRow (index, rows) {
      try {
        await this.$confirm('此操作将永久删除该题组, 是否继续?')
        // 传入当前list的id到删除接口
        await delQuestionsRandoms(this.list[index])

        // 确认删除,重新渲染页面
        this.getQuestionsRandoms()
        // console.log(1)
        this.$message.success('删除角色成功')
      } catch (err) {
        console.log(err)
      }
    },
    // 控制弹出层的显示与影藏
    async ShowDialogForm (item) {
      this.dialogForm = true
      const { data } = await getQuestionsRandomsID(item)
      // console.log(data)
      // 将对象里面的
      data.question = html2Text(data.question)
      data.answer = html2Text(data.answer)
      this.currentData = data
    }
  },
  created () {
    this.getQuestionsRandoms()
  }

}
</script>

<style scoped >
.container {
  margin: 10px;
  padding: 20px;
}
.total {
  margin-left: 20px;
  margin-right: 20px;
  font-weight: 700;
  color: #555;
}
::v-deep .el-card__body {
  padding: 0;
}
.prompt {
  background-color: #f4f4f5;
  height: 30px;
  border-radius: 5px;
  color: #909399;
  margin-bottom: 20px;
  padding-left: 20px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
::v-deep .demo-ruleForm {
  display: flex;
  justify-content: space-between;
}
.el-button--danger {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fbc4c4;
}
.el-button--danger:hover {
  background-color: #f56c6c;
  color: #fff;
}
.listA {
  display: block;
  width: 200px;
  color: rgb(0, 153, 255);
}
</style>
